<template>
  <div>
    <el-button @click="saveData('XZChartDesigner_1')">保存数据</el-button>
    <div id="XZChartDesigner_1" style="width:100%;height: 1080px"></div>
  </div>

</template>

<script>

import {report} from "./testjson/xzchartdesigner_1"

export default {
  data() {
    return {
      chartDesigner: null,
      isReject: false,
      xzOnUpdateData: [
        {
          "name": "商品区域销售",
          "id": "商品区域销售",
          "type": 4,
          "response_data": [
            {
              "商品": "笔记本电脑",
              "区域名称": "北京",
              "年份": "2020",
              "季度": "1",
              "销售额": 1500,
              "目标完成比": 15
            },
            {
              "商品": "笔记本电脑",
              "区域名称": "上海",
              "年份": "2020",
              "季度": "1",
              "销售额": 1600,
              "目标完成比": 15
            },
            {
              "商品": "笔记本电脑",
              "区域名称": "深圳",
              "年份": "2020",
              "季度": "1",
              "销售额": 1700,
              "目标完成比": 15
            },
            {
              "商品": "笔记本电脑",
              "区域名称": "广州",
              "年份": "2020",
              "季度": "1",
              "销售额": 1700,
              "目标完成比": 15
            },
            {
              "商品": "笔记本电脑",
              "区域名称": "杭州",
              "年份": "2020",
              "季度": "1",
              "销售额": 1700,
              "目标完成比": 15
            },
            {
              "商品": "台式电脑",
              "区域名称": "北京",
              "年份": "2020",
              "季度": "1",
              "销售额": 900,
              "目标完成比": 15
            },
            {
              "商品": "台式电脑",
              "区域名称": "上海",
              "年份": "2020",
              "季度": "1",
              "销售额": 1200,
              "目标完成比": 15
            },
            {
              "商品": "台式电脑",
              "区域名称": "深圳",
              "年份": "2020",
              "季度": "1",
              "销售额": 1400,
              "目标完成比": 15
            },
            {
              "商品": "台式电脑",
              "区域名称": "广州",
              "年份": "2020",
              "季度": "1",
              "销售额": 1400,
              "目标完成比": 15
            },
            {
              "商品": "台式电脑",
              "区域名称": "杭州",
              "年份": "2020",
              "季度": "1",
              "销售额": 1400,
              "目标完成比": 15
            },
            {
              "商品": "PURA70",
              "区域名称": "北京",
              "年份": "2020",
              "季度": "1",
              "销售额": 7900,
              "目标完成比": 15
            },
            {
              "商品": "PURA70",
              "区域名称": "上海",
              "年份": "2020",
              "季度": "1",
              "销售额": 8200,
              "目标完成比": 15
            },
            {
              "商品": "PURA70",
              "区域名称": "深圳",
              "年份": "2020",
              "季度": "1",
              "销售额": 8400,
              "目标完成比": 15
            },
            {
              "商品": "PURA70",
              "区域名称": "广州",
              "年份": "2020",
              "季度": "1",
              "销售额": 8400,
              "目标完成比": 15
            },
            {
              "商品": "PURA70",
              "区域名称": "杭州",
              "年份": "2020",
              "季度": "1",
              "销售额": 8400,
              "目标完成比": 15
            },
            {
              "商品": "笔记本电脑",
              "区域名称": "北京",
              "年份": "2020",
              "季度": "2",
              "销售额": 1500,
              "目标完成比": 30
            },
            {
              "商品": "笔记本电脑",
              "区域名称": "上海",
              "年份": "2020",
              "季度": "2",
              "销售额": 1600,
              "目标完成比": 30
            },
            {
              "商品": "笔记本电脑",
              "区域名称": "深圳",
              "年份": "2020",
              "季度": "2",
              "销售额": 1700,
              "目标完成比": 30
            },
            {
              "商品": "笔记本电脑",
              "区域名称": "广州",
              "年份": "2020",
              "季度": "2",
              "销售额": 1700,
              "目标完成比": 30
            },
            {
              "商品": "笔记本电脑",
              "区域名称": "杭州",
              "年份": "2020",
              "季度": "2",
              "销售额": 1700,
              "目标完成比": 30
            },
            {
              "商品": "台式电脑",
              "区域名称": "北京",
              "年份": "2020",
              "季度": "2",
              "销售额": 900,
              "目标完成比": 30
            },
            {
              "商品": "台式电脑",
              "区域名称": "上海",
              "年份": "2020",
              "季度": "2",
              "销售额": 1200,
              "目标完成比": 30
            },
            {
              "商品": "台式电脑",
              "区域名称": "深圳",
              "年份": "2020",
              "季度": "2",
              "销售额": 1400,
              "目标完成比": 30
            },
            {
              "商品": "台式电脑",
              "区域名称": "广州",
              "年份": "2020",
              "季度": "2",
              "销售额": 1400,
              "目标完成比": 30
            },
            {
              "商品": "台式电脑",
              "区域名称": "杭州",
              "年份": "2020",
              "季度": "2",
              "销售额": 1400,
              "目标完成比": 30
            },
            {
              "商品": "PURA70",
              "区域名称": "北京",
              "年份": "2020",
              "季度": "2",
              "销售额": 7900,
              "目标完成比": 30
            },
            {
              "商品": "PURA70",
              "区域名称": "上海",
              "年份": "2020",
              "季度": "2",
              "销售额": 8200,
              "目标完成比": 30
            },
            {
              "商品": "PURA70",
              "区域名称": "深圳",
              "年份": "2020",
              "季度": "2",
              "销售额": 8400,
              "目标完成比": 30
            },
            {
              "商品": "PURA70",
              "区域名称": "广州",
              "年份": "2020",
              "季度": "2",
              "销售额": 8400,
              "目标完成比": 30
            },
            {
              "商品": "PURA70",
              "区域名称": "杭州",
              "年份": "2020",
              "季度": "2",
              "销售额": 8400,
              "目标完成比": 30
            },
            {
              "商品": "笔记本电脑",
              "区域名称": "北京",
              "年份": "2020",
              "季度": "3",
              "销售额": 1500,
              "目标完成比": 56
            },
            {
              "商品": "笔记本电脑",
              "区域名称": "上海",
              "年份": "2020",
              "季度": "3",
              "销售额": 1600,
              "目标完成比": 56
            },
            {
              "商品": "笔记本电脑",
              "区域名称": "深圳",
              "年份": "2020",
              "季度": "3",
              "销售额": 1700,
              "目标完成比": 56
            },
            {
              "商品": "笔记本电脑",
              "区域名称": "广州",
              "年份": "2020",
              "季度": "3",
              "销售额": 1700,
              "目标完成比": 56
            },
            {
              "商品": "笔记本电脑",
              "区域名称": "杭州",
              "年份": "2020",
              "季度": "3",
              "销售额": 1700,
              "目标完成比": 56
            },
            {
              "商品": "台式电脑",
              "区域名称": "北京",
              "年份": "2020",
              "季度": "3",
              "销售额": 900,
              "目标完成比": 56
            },
            {
              "商品": "台式电脑",
              "区域名称": "上海",
              "年份": "2020",
              "季度": "3",
              "销售额": 1200,
              "目标完成比": 56
            },
            {
              "商品": "台式电脑",
              "区域名称": "深圳",
              "年份": "2020",
              "季度": "3",
              "销售额": 1400,
              "目标完成比": 56
            },
            {
              "商品": "台式电脑",
              "区域名称": "广州",
              "年份": "2020",
              "季度": "3",
              "销售额": 1400,
              "目标完成比": 56
            },
            {
              "商品": "台式电脑",
              "区域名称": "杭州",
              "年份": "2020",
              "季度": "3",
              "销售额": 1400,
              "目标完成比": 56
            },
            {
              "商品": "PURA70",
              "区域名称": "北京",
              "年份": "2020",
              "季度": "3",
              "销售额": 7900,
              "目标完成比": 56
            },
            {
              "商品": "PURA70",
              "区域名称": "上海",
              "年份": "2020",
              "季度": "3",
              "销售额": 8200,
              "目标完成比": 56
            },
            {
              "商品": "PURA70",
              "区域名称": "深圳",
              "年份": "2020",
              "季度": "3",
              "销售额": 8400,
              "目标完成比": 56
            },
            {
              "商品": "PURA70",
              "区域名称": "广州",
              "年份": "2020",
              "季度": "3",
              "销售额": 8400,
              "目标完成比": 56
            },
            {
              "商品": "PURA70",
              "区域名称": "杭州",
              "年份": "2020",
              "季度": "3",
              "销售额": 8400,
              "目标完成比": 56
            },
            {
              "商品": "笔记本电脑",
              "区域名称": "北京",
              "年份": "2020",
              "季度": "4",
              "销售额": 1500,
              "目标完成比": 90
            },
            {
              "商品": "笔记本电脑",
              "区域名称": "上海",
              "年份": "2020",
              "季度": "4",
              "销售额": 1600,
              "目标完成比": 90
            },
            {
              "商品": "笔记本电脑",
              "区域名称": "深圳",
              "年份": "2020",
              "季度": "4",
              "销售额": 1700,
              "目标完成比": 90
            },
            {
              "商品": "笔记本电脑",
              "区域名称": "广州",
              "年份": "2020",
              "季度": "4",
              "销售额": 1700,
              "目标完成比": 90
            },
            {
              "商品": "笔记本电脑",
              "区域名称": "杭州",
              "年份": "2020",
              "季度": "4",
              "销售额": 1700,
              "目标完成比": 90
            },
            {
              "商品": "台式电脑",
              "区域名称": "北京",
              "年份": "2020",
              "季度": "4",
              "销售额": 900,
              "目标完成比": 90
            },
            {
              "商品": "台式电脑",
              "区域名称": "上海",
              "年份": "2020",
              "季度": "4",
              "销售额": 1200,
              "目标完成比": 90
            },
            {
              "商品": "台式电脑",
              "区域名称": "深圳",
              "年份": "2020",
              "季度": "4",
              "销售额": 1400,
              "目标完成比": 90
            },
            {
              "商品": "台式电脑",
              "区域名称": "广州",
              "年份": "2020",
              "季度": "4",
              "销售额": 1400,
              "目标完成比": 90
            },
            {
              "商品": "台式电脑",
              "区域名称": "杭州",
              "年份": "2020",
              "季度": "4",
              "销售额": 1400,
              "目标完成比": 90
            },
            {
              "商品": "PURA70",
              "区域名称": "北京",
              "年份": "2020",
              "季度": "4",
              "销售额": 7900,
              "目标完成比": 90
            },
            {
              "商品": "PURA70",
              "区域名称": "上海",
              "年份": "2020",
              "季度": "4",
              "销售额": 8200,
              "目标完成比": 90
            },
            {
              "商品": "PURA70",
              "区域名称": "深圳",
              "年份": "2020",
              "季度": "4",
              "销售额": 8400,
              "目标完成比": 90
            },
            {
              "商品": "PURA70",
              "区域名称": "广州",
              "年份": "2020",
              "季度": "4",
              "销售额": 8400,
              "目标完成比": 90
            },
            {
              "商品": "PURA70",
              "区域名称": "杭州",
              "年份": "2020",
              "季度": "4",
              "销售额": 8400,
              "目标完成比": 90
            },
            {
              "商品": "笔记本电脑",
              "区域名称": "北京",
              "年份": "2021",
              "季度": "1",
              "销售额": 1500,
              "目标完成比": 18
            },
            {
              "商品": "笔记本电脑",
              "区域名称": "上海",
              "年份": "2021",
              "季度": "1",
              "销售额": 1600,
              "目标完成比": 18
            },
            {
              "商品": "笔记本电脑",
              "区域名称": "深圳",
              "年份": "2021",
              "季度": "1",
              "销售额": 1700,
              "目标完成比": 18
            },
            {
              "商品": "笔记本电脑",
              "区域名称": "广州",
              "年份": "2021",
              "季度": "1",
              "销售额": 1700,
              "目标完成比": 18
            },
            {
              "商品": "笔记本电脑",
              "区域名称": "杭州",
              "年份": "2021",
              "季度": "1",
              "销售额": 1700,
              "目标完成比": 18
            },
            {
              "商品": "台式电脑",
              "区域名称": "北京",
              "年份": "2021",
              "季度": "1",
              "销售额": 900,
              "目标完成比": 18
            },
            {
              "商品": "台式电脑",
              "区域名称": "上海",
              "年份": "2021",
              "季度": "1",
              "销售额": 1200,
              "目标完成比": 18
            },
            {
              "商品": "台式电脑",
              "区域名称": "深圳",
              "年份": "2021",
              "季度": "1",
              "销售额": 1400,
              "目标完成比": 18
            },
            {
              "商品": "台式电脑",
              "区域名称": "广州",
              "年份": "2021",
              "季度": "1",
              "销售额": 1400,
              "目标完成比": 18
            },
            {
              "商品": "台式电脑",
              "区域名称": "杭州",
              "年份": "2021",
              "季度": "1",
              "销售额": 1400,
              "目标完成比": 18
            },
            {
              "商品": "PURA70",
              "区域名称": "北京",
              "年份": "2021",
              "季度": "1",
              "销售额": 7900,
              "目标完成比": 18
            },
            {
              "商品": "PURA70",
              "区域名称": "上海",
              "年份": "2021",
              "季度": "1",
              "销售额": 8200,
              "目标完成比": 18
            },
            {
              "商品": "PURA70",
              "区域名称": "深圳",
              "年份": "2021",
              "季度": "1",
              "销售额": 8400,
              "目标完成比": 18
            },
            {
              "商品": "PURA70",
              "区域名称": "广州",
              "年份": "2021",
              "季度": "1",
              "销售额": 8400,
              "目标完成比": 18
            },
            {
              "商品": "PURA70",
              "区域名称": "杭州",
              "年份": "2021",
              "季度": "1",
              "销售额": 8400,
              "目标完成比": 18
            },
            {
              "商品": "笔记本电脑",
              "区域名称": "北京",
              "年份": "2021",
              "季度": "2",
              "销售额": 1500,
              "目标完成比": 39
            },
            {
              "商品": "笔记本电脑",
              "区域名称": "上海",
              "年份": "2021",
              "季度": "2",
              "销售额": 1600,
              "目标完成比": 39
            },
            {
              "商品": "笔记本电脑",
              "区域名称": "深圳",
              "年份": "2021",
              "季度": "2",
              "销售额": 1700,
              "目标完成比": 39
            },
            {
              "商品": "笔记本电脑",
              "区域名称": "广州",
              "年份": "2021",
              "季度": "2",
              "销售额": 1700,
              "目标完成比": 39
            },
            {
              "商品": "笔记本电脑",
              "区域名称": "杭州",
              "年份": "2021",
              "季度": "2",
              "销售额": 1700,
              "目标完成比": 39
            },
            {
              "商品": "台式电脑",
              "区域名称": "北京",
              "年份": "2021",
              "季度": "2",
              "销售额": 900,
              "目标完成比": 39
            },
            {
              "商品": "台式电脑",
              "区域名称": "上海",
              "年份": "2021",
              "季度": "2",
              "销售额": 1200,
              "目标完成比": 39
            },
            {
              "商品": "台式电脑",
              "区域名称": "深圳",
              "年份": "2021",
              "季度": "2",
              "销售额": 1400,
              "目标完成比": 39
            },
            {
              "商品": "台式电脑",
              "区域名称": "广州",
              "年份": "2021",
              "季度": "2",
              "销售额": 1400,
              "目标完成比": 39
            },
            {
              "商品": "台式电脑",
              "区域名称": "杭州",
              "年份": "2021",
              "季度": "2",
              "销售额": 1400,
              "目标完成比": 39
            },
            {
              "商品": "PURA70",
              "区域名称": "北京",
              "年份": "2021",
              "季度": "2",
              "销售额": 7900,
              "目标完成比": 39
            },
            {
              "商品": "PURA70",
              "区域名称": "上海",
              "年份": "2021",
              "季度": "2",
              "销售额": 8200,
              "目标完成比": 39
            },
            {
              "商品": "PURA70",
              "区域名称": "深圳",
              "年份": "2021",
              "季度": "2",
              "销售额": 8400,
              "目标完成比": 39
            },
            {
              "商品": "PURA70",
              "区域名称": "广州",
              "年份": "2021",
              "季度": "2",
              "销售额": 8400,
              "目标完成比": 39
            },
            {
              "商品": "PURA70",
              "区域名称": "杭州",
              "年份": "2021",
              "季度": "2",
              "销售额": 8400,
              "目标完成比": 39
            },
            {
              "商品": "笔记本电脑",
              "区域名称": "北京",
              "年份": "2021",
              "季度": "3",
              "销售额": 1500,
              "目标完成比": 61
            },
            {
              "商品": "笔记本电脑",
              "区域名称": "上海",
              "年份": "2021",
              "季度": "3",
              "销售额": 1600,
              "目标完成比": 61
            },
            {
              "商品": "笔记本电脑",
              "区域名称": "深圳",
              "年份": "2021",
              "季度": "3",
              "销售额": 1700,
              "目标完成比": 61
            },
            {
              "商品": "笔记本电脑",
              "区域名称": "广州",
              "年份": "2021",
              "季度": "3",
              "销售额": 1700,
              "目标完成比": 61
            },
            {
              "商品": "笔记本电脑",
              "区域名称": "杭州",
              "年份": "2021",
              "季度": "3",
              "销售额": 1700,
              "目标完成比": 61
            },
            {
              "商品": "台式电脑",
              "区域名称": "北京",
              "年份": "2021",
              "季度": "3",
              "销售额": 900,
              "目标完成比": 61
            },
            {
              "商品": "台式电脑",
              "区域名称": "上海",
              "年份": "2021",
              "季度": "3",
              "销售额": 1200,
              "目标完成比": 61
            },
            {
              "商品": "台式电脑",
              "区域名称": "深圳",
              "年份": "2021",
              "季度": "3",
              "销售额": 1400,
              "目标完成比": 61
            },
            {
              "商品": "台式电脑",
              "区域名称": "广州",
              "年份": "2021",
              "季度": "3",
              "销售额": 1400,
              "目标完成比": 61
            },
            {
              "商品": "台式电脑",
              "区域名称": "杭州",
              "年份": "2021",
              "季度": "3",
              "销售额": 1400,
              "目标完成比": 61
            },
            {
              "商品": "PURA70",
              "区域名称": "北京",
              "年份": "2021",
              "季度": "3",
              "销售额": 7900,
              "目标完成比": 61
            },
            {
              "商品": "PURA70",
              "区域名称": "上海",
              "年份": "2021",
              "季度": "3",
              "销售额": 8200,
              "目标完成比": 61
            },
            {
              "商品": "PURA70",
              "区域名称": "深圳",
              "年份": "2021",
              "季度": "3",
              "销售额": 8400,
              "目标完成比": 61
            },
            {
              "商品": "PURA70",
              "区域名称": "广州",
              "年份": "2021",
              "季度": "3",
              "销售额": 8400,
              "目标完成比": 61
            },
            {
              "商品": "PURA70",
              "区域名称": "杭州",
              "年份": "2021",
              "季度": "3",
              "销售额": 8400,
              "目标完成比": 61
            },
            {
              "商品": "笔记本电脑",
              "区域名称": "北京",
              "年份": "2021",
              "季度": "4",
              "销售额": 1500,
              "目标完成比": 98
            },
            {
              "商品": "笔记本电脑",
              "区域名称": "上海",
              "年份": "2021",
              "季度": "4",
              "销售额": 1600,
              "目标完成比": 98
            },
            {
              "商品": "笔记本电脑",
              "区域名称": "深圳",
              "年份": "2021",
              "季度": "4",
              "销售额": 1700,
              "目标完成比": 98
            },
            {
              "商品": "笔记本电脑",
              "区域名称": "广州",
              "年份": "2021",
              "季度": "4",
              "销售额": 1700,
              "目标完成比": 98
            },
            {
              "商品": "笔记本电脑",
              "区域名称": "杭州",
              "年份": "2021",
              "季度": "4",
              "销售额": 1700,
              "目标完成比": 98
            },
            {
              "商品": "台式电脑",
              "区域名称": "北京",
              "年份": "2021",
              "季度": "4",
              "销售额": 900,
              "目标完成比": 98
            },
            {
              "商品": "台式电脑",
              "区域名称": "上海",
              "年份": "2021",
              "季度": "4",
              "销售额": 1200,
              "目标完成比": 98
            },
            {
              "商品": "台式电脑",
              "区域名称": "深圳",
              "年份": "2021",
              "季度": "4",
              "销售额": 1400,
              "目标完成比": 98
            },
            {
              "商品": "台式电脑",
              "区域名称": "广州",
              "年份": "2021",
              "季度": "4",
              "销售额": 1400,
              "目标完成比": 98
            },
            {
              "商品": "台式电脑",
              "区域名称": "杭州",
              "年份": "2021",
              "季度": "4",
              "销售额": 1400,
              "目标完成比": 98
            },
            {
              "商品": "PURA70",
              "区域名称": "北京",
              "年份": "2021",
              "季度": "4",
              "销售额": 7900,
              "目标完成比": 98
            },
            {
              "商品": "PURA70",
              "区域名称": "上海",
              "年份": "2021",
              "季度": "4",
              "销售额": 8200,
              "目标完成比": 99
            },
            {
              "商品": "PURA70",
              "区域名称": "深圳",
              "年份": "2021",
              "季度": "4",
              "销售额": 8400,
              "目标完成比": 101
            },
            {
              "商品": "PURA70",
              "区域名称": "广州",
              "年份": "2021",
              "季度": "4",
              "销售额": 8400,
              "目标完成比": 103
            },
            {
              "商品": "PURA70",
              "区域名称": "杭州",
              "年份": "2021",
              "季度": "4",
              "销售额": 8400,
              "目标完成比": 108
            }
          ]
        }
      ],
      xzOnUpdateDatasetList: [
        {
          "name": "商品区域销售",
          "id": "商品区域销售",
          "fields": [
            {
              "name": "商品",
              "data_type": 3
            },
            {
              "name": "区域名称",
              "data_type": 3
            },
            {
              "name": "销售额",
              "data_type": 2
            }
            ,
            {
              "name": "年份",
              "data_type": 3
            },
            {
              "name": "季度",
              "data_type": 3
            },
            {
              "name": "目标完成比",
              "data_type": 2
            }
          ],
          "params": [
            {
              "name": "商品",
              "data_type": 3
            },
            {
              "name": "区域名称",
              "data_type": 3
            }
          ]
        }
      ],
      options: {
        uploadImage: { //上传图片相关信息 如果不传该字段时，设计器用到的所有上传图片配置项均不显示。
          server: "url",//上传图片地址
          method: "post",//上传图片请求方式
          headers: { //上传图片请求头
            "Authorization": "Token XXXXXXXX"
          },
          fieldName: "file",
          resultField: "file"
        },
        pageData: { //画布初始化时的宽高
          width: '1920px',
          height: '1080px'
        },
        templateCenter: true,
        dataSet: [
          {
            'id': 1,
            'value': '新建Json数据集'
          },
          {
            'id': 2,
            'value': '新建Http接口数据集'
          },
          {
            'id': 3,
            'value': 'API服务数据集'
          },
          {
            'id': 4,
            'value': '外部数据集'
          }
        ]
      }
    }
  },
  mounted() {
    this.options.onUpdateDatasetList = this.onUpdateDatasetList
    this.options.onUpdateData = this.onUpdateData
    try {
      // eslint-disable-next-line no-undef
      this.chartDesigner = new XZChartDesigner("#XZChartDesigner_1", this.options, report);
    } catch (error) {
      console.log('..........created,throw errors:', error)
    }
  },
  methods: {
    onUpdateDatasetList() {
      return new Promise((resolve, reject) => {
        if( this.isReject ) {
          return reject([])
        }else{
          return resolve(this.xzOnUpdateDatasetList)

        }
      })
    },
    onUpdateData(datasets, params) {
      console.log(datasets,params)
      return new Promise((resolve, reject) => {
        if( this.isReject ) {
          return reject([])
        }else{
          resolve(this.xzOnUpdateData)
        }

      })
    },
    saveData(reportDesignerPreviewId) {
      // config 为报表配置 ， data为 数据配置
      console.log(reportDesignerPreviewId)
      console.log("....XZChartDesigner_1.vue.....designer.getSaveData().config:",this.chartDesigner.getSaveData().config)
      console.log("....XZChartDesigner_1.vue.....designer.getSaveData().data.dataConfig:",this.chartDesigner.getSaveData().dataConfig);

    }
  }
}
</script>
